import React, { Component } from 'react'
import axios from 'axios'
 class Detail extends Component {
  state = {
    detailItem:[]
  }
  async componentDidMount(){
    let res = await axios.get("/list")
    let detailItem = res.data.filter((item,index)=>{
      return item.id == this.props.match.params.id
    })
    console.log(detailItem);
    this.setState({
      detailItem
    })
  }
  render() {
    console.log(this.props.match.params.id) // (this.props.history放的就是跟路由有关得信息
    return (
      <div>
          {
             this.state.detailItem&& this.state.detailItem.length? this.state.detailItem.map((item,index)=>{
               return <div key={index}>
                   <img src={item.img} alt="" />
                   <span>{item.title}</span>
               </div>
             }):""
          }
      </div>
    )
  }
}

export default Detail